<template>
  <el-main class="bg table_wrap comtabel_t">
    <el-form label-position="right" :model="query" class="form p_4" label-width="120">
      <el-row class="rows row1">
        <el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
          <el-form-item label="民宿名称">
            <el-input v-model="query.nameOfHomestay"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="开始时间">
            <el-date-picker
                v-model="query.startTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="结束时间">
            <el-date-picker
                v-model="query.endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="rows row2">
        <el-col :xs="24" :sm="24" :lg="24" class="search_btn_wrap search_btns">

          <el-col :xs="24" :sm="10" :lg="8" class="search_btn_1 search_btn_wrap_1 btns">
            <el-button type="primary" @click="search()" class="search_btn_find">查询</el-button>
            <el-button @click="reset()" style="margin-right: 74px;" class="search_btn_reset">重置</el-button>
            <el-button v-if="$check_action('/merchant_billing/table','del') || $check_action('/merchant_billing/view','del')" class="search_btn_del" type="danger" @click="delInfo()">删除</el-button>
          </el-col>
        </el-col>
      </el-row >
    </el-form>
    <el-table :data="list" @selection-change="selectionChange" @sort-change="$sortChange" style="width: 100%" id="dataTable">
      <el-table-column fixed type="selection" tooltip-effect="dark" width="55"/>
      <el-table-column  prop="merchant_name" @sort-change="$sortChange" label="商家用户"/>
      <el-table-column prop="name_of_homestay" @sort-change="$sortChange" label="民宿名称"/>
      <el-table-column prop="total_cost" @sort-change="$sortChange" label="收入金额"/>
      <el-table-column prop="platform_drawing" @sort-change="$sortChange" label="平台抽成"/>
    </el-table>
  </el-main>
</template>
<script>
import mixin from "@/mixins/page.js";

export default {
  mixins: [mixin],
  data() {
    return {
      // 获取数据地址
      url_get_list: "~/api/homestay_orders/statistics",
      // 查询
      query: {
        "nameOfHomestay": "",
        "startTime": "",
        "endTime": "",
      },
      // 数据
      list: [],
      list_user_business_user:[],
      map_user_business_user:[]
    }
  },
		methods: {
			/**
			 * @description 获取到列表事件
			 * @param {Object} res 响应结果
			 */
			get_list_before(param){
				var user_group = this.user.user_group;
				if(user_group != "管理员"){
						let sqlwhere = "(";
            if(user_group=="商家用户"){
              sqlwhere+= "business_user = " + this.user.user_id + " or ";
            }
            if (sqlwhere.length>1){
              sqlwhere = sqlwhere.substr(0,sqlwhere.length-4);
              sqlwhere += ")";
              param["sqlwhere"] = sqlwhere;
            }
					}
				return param;
			},
				/**
			 * 获取商家用户用户列表
			 */
			async get_list_user_business_user() {
				var json = await this.$get("~/api/user/get_list?user_group=商家用户");
				if(json.result && json.result.list){
					this.list_user_business_user = json.result.list;

				}
				else if(json.error){
					console.error(json.error);
				}
			},
    },
    created() {
    }
	}
</script>

<style type="text/css">
	.bg {
		background: white;
	}

	.form.p_4 {
		padding: 1rem;
	}

	.form .el-input {
		width: initial;
	}

	.mt {
		margin-top: 1rem;
	}

	.text_center {
		text-align: center;
	}

	.float-right {
		float: right;
	}


	.modal_wrap{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		z-index: 9999999999;
	}
	.modal_wrap .modal_box{
		width: 400px;
		height: auto;
		background: url("../../assets/modal_bg.jpg") no-repeat center;
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -200px;
		margin-top: -100px;
		border-radius: 10px;
		padding: 10px;
		}
	.modal_wrap .modal_box .modal_box_close{
		font-size: 20px;
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
		}
	.modal_wrap .modal_box .modal_box_title{
	  text-align: center;
    font-size: 18px;
    margin: 16px auto;
    color: #fff;
    border-bottom: 1px solid rgba(117, 116, 116,0.5);
    padding-bottom: 16px;
    width: 356px;
		}
	.modal_wrap .modal_box .modal_box_text{
		text-align: center;
		font-size: 14px;
		color: #fff;
		margin: 5px auto;
		width: 90%;
		}
	.modal_wrap .modal_box .btn_box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 42px;
		margin-bottom: 20px;
		}
			.modal_wrap .modal_box .btn_box span{
				display: inline-block;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #ccc;
				font-size: 14px;
				cursor: pointer;
				color: #fff;
			}
	.modal_wrap .modal_box .btn_box span:nth-child(2){
		background: #409EFF;
		color: #fff;
		border-color: #409EFF;
		margin-left: 15px;
	}
	.el-date-editor .el-range-separator{
		width: 10% !important;
	}
</style>
